<form [formGroup]="form" (ngSubmit)="login()">
  <div class="alert alert-danger" *ngIf="form.errors">The username or password is invalid.</div>
  <div class="form-group">
    <label for="username">Username</label>
    <input
      formControlName="username"
      id="username"
      type="text"
      class="form-control"
    >
    <div *ngIf="username.pending">Checking for uniqueness...</div>
    <div *ngIf="username.touched && username.invalid" class="alert alert-danger">
      <div *ngIf="username.errors.required">Username is required.</div>
      <div *ngIf="username.errors.minlength"> Username should be minimum {{ username.errors.minlength.requiredLength }} characters.</div>
      <div *ngIf="username.errors.cannotContainSpace">Username cannot contain space.</div>
      <div *ngIf="username.errors.shouldBeUnique">Username should be unique.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input 
    formControlName="password"
    type="password" id="password" class="form-control">
    <div *ngIf="password.touched && password.invalid" class="alert alert-danger">Password is required.</div>
  </div>
  <button [disabled]="form.invalid" class="btn btn-primary" type="submit">Sign Up</button>
</form>